<script setup lang="ts">
    defineProps({
        leftSpan: {
            default: 20,
            type: Number,
        },
        rightSpan:{
            default: 4,
            type: Number,
        },
        spaceSize:{
            default:20,
            type: Number,
        },
        needSearch:{
            default:true,
            type: Boolean
        },
        needBottomBr:{
            default:true,
            type:Boolean
        }
    });
    const emits = defineEmits(['search'])
    function searchQuery() {
        emits('search')
    }
</script>
<template>
    <div class="SearchQuery">
        <el-row :class="{'border-br':needBottomBr}">
            <el-col :span="leftSpan">
                <el-space wrap :size="spaceSize">
                <slot name="left">
                </slot>
                </el-space>
                <el-button v-if="needSearch" size="default" type="primary" @click="searchQuery">查询</el-button>
            </el-col>
            <el-col class="flex-end" :span="rightSpan">
                    <slot name="right">
                    </slot>
            </el-col>
        </el-row>
    </div>
</template>
<style lang="scss" scoped>
.SearchQuery{
    width: 100%;
    .border-br{
        padding-bottom: 12px;
        border-bottom: 1px solid #cbcbcb;
    }
}
</style>
